<template>
    <transition name="slide">
        <div class="message-wrap" :class="[type, center ? 'text-center' : '']" :style="{ ...style }" v-if="visible">
            <div v-if="messageArr.length" class="message-line">
                <div v-for="(item, index) in messageArr" :key="index" class="message-line-item">
                {{ item }}
                </div>
            </div>
            <div v-else class="message">{{ message }}</div>
        </div>
    </transition>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  props: {
    message: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: 'success',
    },
    duration: {
      type: Number,
      default: 2000,
    },
  },
  data() {
    const messageArr: Array<string> = [];
    const style = {};
    return {
      messageArr,
      visible: true,
      center: false,
      style,
    };
  },
  created(): void {
    const arr = this.message.split('\n');
    if (arr.length > 1) {
      this.messageArr = arr;
    }
  },
  mounted(): void {
    this.startTimer();
  },
  methods: {
    startTimer(): void {
      const { duration } = this;
      const timer = setTimeout(() => {
        this.visible = false;
        clearTimeout(timer);
      }, duration);
    },
  },
});
</script>

<style lang="less" scoped>
    
</style>